List

Tailwind CSS offers several ways to create and style lists using utility classes.

Here are the common approaches:

1. Unordered Lists (Bullet Points):

Use the <ul> HTML tag to create an ordered list.
Apply the list-disc class to display disc (bullet point) markers for each list item.

Example:

<ul class="list-disc">
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>

2. Ordered Lists (Numbers):

Use the <ol> HTML tag to create an ordered list.
By default, Tailwind renders numbers (1, 2, 3….) as markers.

Example:

<ol>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ol>

3. Customizing Markers:

Tailwind provides classes for different marker styles:
 

• list-disc: Disc (bullet point) markers (default for unordered lists)
• list-decimal: Decimal numbers (1., 2., 3.)
• list-roman: Lowercase Roman numerals (i., ii., iii.)
• list-upper-roman: Uppercase Roman numerals (I., II., III.)

Example:
 

<ol class="list-decimal">
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ol>

4. Styling List Items:
 

Use standard CSS properties within your Tailwind classes to style list items:
 

• padding for spacing around the content
• margin for spacing between list items
• color for text color
• font-weight for bold or lighter text

Example:

<ul class="list-disc pl-4 py-2 mb-4"> <li class="text-gray-700 font-medium">Item 1</li> <li class="text-gray-700 font-medium">Item 2</li>
 <li class="text-gray-700 font-medium">Item 3</li>
</ul>